<!DOCTYPE html>
<meta charset="utf-8">
<title>relatedTarget on blur()</title>
<link rel="help" href="https://w3c.github.io/uievents/#events-focusevent">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<input id="input1">
<input id="input2">

<script>
"use strict";

const input1 = document.getElementById("input1");
const input2 = document.getElementById("input2");

async_test(t => {
  input1.focus();

  let blurCount = 0;
  let focusoutCount = 0;
  let focusCount = 0;
  let focusinCount = 0;
  function watchEvent(evt) {
    const { relatedTarget, target, type } = evt;
    if (type === "blur") {
      assert_equals(target, input1, "blur target is input1");
      assert_equals(relatedTarget, null, "blur relatedTarget is null");
      blurCount++;
    } else if (type === "focusout") {
      assert_equals(target, input1, "focusout target is input1");
      assert_equals(relatedTarget, null, "focusout relatedTarget is null");
      focusoutCount++;
    } else if (type === "focus") {
      focusCount++;
    } else if (type === "focusin") {
      focusinCount++;
    }
  }
  document.addEventListener("blur", watchEvent, true);
  document.addEventListener("focusout", watchEvent, true);
  document.addEventListener("focus", watchEvent, true);
  document.addEventListener("focusin", watchEvent, true);

  input1.blur();
  assert_equals(blurCount, 1, "blur fired once");
  assert_equals(focusoutCount, 1, "focusout fired once");
  assert_equals(focusCount, 0, "focus not fired");
  assert_equals(focusinCount, 0, "focusin not fired");
  assert_equals(document.activeElement, document.body, "activeElement is body");

  document.removeEventListener("blur", watchEvent, true);
  document.removeEventListener("focusout", watchEvent, true);
  document.removeEventListener("focus", watchEvent, true);
  document.removeEventListener("focusin", watchEvent, true);
  t.done();
}, "relatedTarget on self blur");

async_test(t => {
  input1.focus();

  let blurCount = 0;
  let focusoutCount = 0;
  let focusCount = 0;
  let focusinCount = 0;
  function watchEvent(evt) {
    const { relatedTarget, target, type } = evt;
    if (type === "blur") {
      assert_equals(target, input1, "blur target is input1");
      assert_equals(relatedTarget, input2, "blur relatedTarget is input2");
      blurCount++;
    } else if (type === "focusout") {
      assert_equals(target, input1, "focusout target is input1");
      assert_equals(relatedTarget, input2, "focusout relatedTarget is input2");
      focusoutCount++;
    } else if (type === "focus") {
      assert_equals(target, input2, "focus target is input2");
      assert_equals(relatedTarget, input1, "focus relatedTarget is input1");
      focusCount++;
    } else if (type === "focusin") {
      assert_equals(target, input2, "focusin target is input2");
      assert_equals(relatedTarget, input1, "focusin relatedTarget is input1");
      focusinCount++;
    }
  }
  document.addEventListener("blur", watchEvent, true);
  document.addEventListener("focusout", watchEvent, true);
  document.addEventListener("focus", watchEvent, true);
  document.addEventListener("focusin", watchEvent, true);

  input2.focus();
  assert_equals(blurCount, 1, "blur fired once");
  assert_equals(focusoutCount, 1, "focusout fired once");
  assert_equals(focusCount, 1, "focus fired once");
  assert_equals(focusinCount, 1, "focusin fired once");
  assert_equals(document.activeElement, input2, "activeElement is input2");

  document.removeEventListener("blur", watchEvent, true);
  document.removeEventListener("focusout", watchEvent, true);
  document.removeEventListener("focus", watchEvent, true);
  document.removeEventListener("focusin", watchEvent, true);
  input2.blur();
  t.done();
}, "relatedTarget for blur when focusing on another element");
</script>
